import { Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
import DepositRouter from './Deposit'
import lzn from './lzn/index'
import Allocate from './Allocate/index'
import qqiangzhang from './qqiangzhang/index'

// 配置一级路由
var Index = lazy(() => import('../views/Index'))
var Login = lazy(() => import('../views/Login'))
var NotFound = lazy(() => import('../views/NotFound'))
var Register = lazy(() => import('../views/Register'))

// 二级路由
var Home = lazy(() => import('../views/Index/Home'))


// // 三级路由
var Chart = lazy(() => import('../views/Index/Home/Chart'))
var Inventory = lazy(() => import('../views/Index/Home/Inventory'))
var InventoryType = lazy(() => import('../views/Index/Home/InventoryType'))


// authComponent 封装的权限，可以在任何按钮或者js或者tsx中任意地方使用
export function authComponent(permission) {//children 是需要渲染的组件
    //    获取当前用户的权限列表，利用三目运算，如果获取到userinfo则是当前userinfo,否则
    // 就是空
    var permissions = localStorage.getItem('userinfo') ?
        JSON.parse(localStorage.getItem('userinfo')).role.permissions : [];

    // 判断当前用户是否有权限访问该组件
    var res = permission && permissions.includes(permission)

    return res;
}

// 封装一个函数式组件，用该组件包裹需要处理的组件，确保每个二级路由，三级路由组件外面都
// 包裹一个Suspense,都有懒加载效果

function AuthComponent({ children, permission }) {
    //获取当前用户的权限列表
    var permissions = localStorage.getItem('userinfo') ?
        JSON.parse(localStorage.getItem('userinfo')).role.permissions : [];
    //判断当前用户是否有权限访问该路由对应的组件
    var res = permission && permissions.includes(permission)

    return (
        <Suspense fallback={<div>loading</div>}>
            {
                //如果res为true,则表示有权限访问,渲染children对应的组件
                //如果res为false,则表示没有权限访问,渲染NotFound组件
                res ? children : <NotFound />
            }
        </Suspense>
    )
}

var routers = [
    {
        path: '/index',
        element: <Suspense><Index /></Suspense>,
        children: [
            {
                path: '/index/home',
                element: <Suspense><Home /></Suspense>,
                children: [
                    {
                        path: '/index/home/chart',
                        element: <Suspense><Chart /></Suspense>,
                    },
                    {
                        path: '/index/home/inventory',
                        element: <Suspense><Inventory /></Suspense>,
                    },

                    {
                        path: '/index/home/inventorytype',
                        element: <Suspense><InventoryType /></Suspense>,
                    },
                    ...DepositRouter,
                    ...lzn,
                    ...Allocate,
                    ...qqiangzhang,
                    {
                        path: '/index/home',
                        element: <Suspense><Navigate to='/index/home/chart' /></Suspense>
                    },
                    {
                        path: '*',
                        element: <Suspense><NotFound /></Suspense>
                    },
                ],
            },

            {
                path: '/index',
                element: <Suspense><Navigate to='/index/home' /></Suspense>
            },
            {
                path: '*',
                element: <Suspense><NotFound /></Suspense>
            },
        ]
    },
    {
        path: '/login',
        element: <Suspense><Login /></Suspense>
    },
    {
        path: '/register',
        element: <Suspense><Register /></Suspense>
    },
    {
        path: '/',
        element: <Suspense><Navigate to='/index' /></Suspense>
    },
    {
        path: '*',
        element: <Suspense><NotFound /></Suspense>
    },
]
export default routers;